<template>
  <div>
    <div>
      <img class="lotImg" loading="lazy" :src="lotImgUrl" @click="lotImgClick">
    </div>
<!--  wafer 单图 List  -->
    <a-modal
        centered
        width="70%"
        :visible="waferImgListModalVisible"
        @cancel="MapListCancel"
        :footer="null"
    >
      <div class="mainDiv">
        <div class="imgDiv" :key="img.waferId" v-for="img in waferImgList">
          <img class="img" loading="lazy" :src="img.imgUrl.replace('#','%23')" @click="maxImg(img.imgUrl)">
          <a-row>
            <a-col class="spanTxt">
              <span>{{img.waferId}}</span>
            </a-col>
          </a-row>
        </div>
      </div>
    </a-modal>
<!--  单图放大展示  -->
    <a-modal
        centered
        width="70%"
        :visible="maxModalVisible"
        @cancel="MaxModelCancel"
        :footer="null"
    >
      <div>
        <img class="maxImg" loading="lazy" :src="maxImgUrl.replace('#','%23')">
      </div>
    </a-modal>
  </div>
</template>
<script>
import SendMsg from "@/api/SendMsg";
import {message} from "ant-design-vue";
import i18n from "@/i18n";

export default {
  name: "LotImg",
  props: ['lotId'],
  data() {
    return {
      lotImgUrl: '',
      waferImgList: [],
      waferImgListModalVisible: false,
      maxModalVisible: false,
      maxImgUrl: '',
    }
  },
  methods: {
    //点击叠图 打开单图展示model
    lotImgClick(){
      if (this.waferImgList.length > 0){
        this.waferImgListModalVisible = true
      }else{
        message.warn(i18n.t('noWaferInfo'));
      }
    },
    //点击放大图片
    maxImg(val){
      this.maxImgUrl = val
      this.maxModalVisible = true
    },
    //关闭图片放大
    MaxModelCancel(){
      this.maxImgUrl = ''
      this.maxModalVisible = false
    },
    //关闭 单图展示model
    MapListCancel(){
      this.waferImgListModalVisible = false
    },
  },
  watch: {
    lotId(){
      console.log("lotId====>"+this.lotId)
      if (this.lotId === undefined || this.lotId === ''){
        this.lotImgUrl = ''
        this.waferImgList = []
        return
      }
      let inTrx = {
        trxId: "retLot",
        actionFlg: "QIMG",
        lotId: this.lotId
      };
      SendMsg.sendPostTrx(inTrx).then((res) => {
        let outTrx = res.data;
        if ('0000000' === outTrx.rtnCode) {
          this.lotImgUrl = '/StackMap/' +outTrx.lotId + '.emf'
          if (outTrx.lotId){
            outTrx.oaryD.forEach(v=>{
              v.imgUrl = '/SingleMap/' +v.waferId+ '.emf'
            })
            this.waferImgList = outTrx.oaryD
          }else{
            this.waferImgList = []
          }
        }
      });
    }
  }
}
</script>
<style>
.lotImg{
  display: block;
  margin: 0 auto;
  height: 680px;
}
.mainDiv{
  display: flex;
  flex-wrap: wrap;
  max-height: 730px;
  overflow-y: auto;
  margin: 15px 0;
}
.imgDiv{
  width: 200px;
  margin: 10px 10px;
}
.img{
  display: block;
  margin: 0 auto;
  height: 200px;
}
.spanTxt{
  text-align: center;
  font-size: medium;
  color: black;
}
.maxImg{
  display: block;
  margin: 0 auto;
  height: 740px;
}
</style>